<template>
  <div>
    <van-nav-bar title="登录/注册" left-text="返回" right-text="注册" left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" />
    <van-form @submit="onSubmit" class="login_form">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button v-if="checkbox==false" disabled round block type="info" native-type="submit">现在登录</van-button>
        <van-button v-else round block type="info" native-type="submit" @click="handle">现在登录</van-button>
      </div>

    </van-form>
    <input type="checkbox" v-model="checkbox" class="xieyi_checkbox">
    <span class="xieyi">我已阅读并同意用户协议和隐私条款</span>
    <div class="login_others">
      <div class="login_others2">
        <div>
          <router-link to="/weixin">
            <img v-if="checkbox==false" src="/wode_images/login/weixin1.png">
            <img v-else src="/wode_images/login/weixin2.png">
          </router-link>
        </div>
        <div>
          <router-link to="/qq">
            <img v-if="checkbox==false" src="/wode_images/login/qq1.png">
            <img v-else src="/wode_images/login/qq2.png">
          </router-link>
        </div>
        <div>
          <router-link to="/weibo">
            <img v-if="checkbox==false" src="/wode_images/login/weibo1.png">
            <img v-else src="/wode_images/login/weibo2.png">
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { Toast } from "vant";
  export default {
    data() {
      return {
        checkbox: false,
        username: "",
        password: ""
      };
    },
    methods: {
      onSubmit(values) {
        console.log("submit", values);
      },
      onClickLeft() {
        this.$router.push("/wode");
      },
      onClickRight() {
        this.$router.push("/register");
      },
      handle() {
        let object = {
          username: this.username,
          password: this.password
        };

        if (this.username != "" && this.password != "") {
          this.axios.post("/login", this.qs.stringify(object)).then(res => {
            if (res.data.code == 200) {
              Toast.success({
                message: "登录成功",
                position: "bottom"
              });
              console.log(res.data.result);
              this.$store.commit("loginOK", res.data.result);
              let userString = JSON.stringify(res.data.result);
              window.sessionStorage.setItem("user", userString);
              window.setTimeout(() => {
                this.$router.push("/wode");
              }, 1000);
            }
            if (res.data.code == 201) {
              Toast.fail({
                message: "用户名或密码错误",
                position: "bottom"
              });
            }
          });
        }
      }
    }
  };
</script>

<style scoped>
  .login_form {
    margin-top: 10px;
  }

  .van-cell {
    height: 60px;
  }

  .van-button {
    font-size: 18px;
  }

  .xieyi_checkbox {
    margin-left: 10px;
  }

  .xieyi {
    font-size: 14px;
  }

  .login_others {
    position: fixed;
    bottom: 30px;
    width: 100%;
  }

  .login_others2 {
    display: flex;
    justify-content: space-around;
  }
</style>